<!-- src/views/ToolDetail.vue -->
<template>
  <component :is="componentName" />
</template>

<script>
export default {
  data() {
    return {
      componentName: null,
    };
  },
  async beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      await vm.loadComponent(to.params.name);
    });
  },
  watch: {
    '$route.params.name': {
      immediate: true,
      handler(newName) {
        this.loadComponent(newName);
      },
    },
  },
  methods: {
    async loadComponent(name) {
      try {
        const componentName = await import(`@/algorithms/${name}.vue`);
        this.componentName = componentName.default;
      } catch (error) {
        console.error("Failed to load component:", error);
      }
    },
  },
};
</script>
